<template>
  <div class="left-menu" >
    <div class="menu-header" @click="toggleMenu()">
      <Icon type="arrow-left-b" v-if="collapseState === 'on'"></Icon>
      <Icon type="arrow-right-b" v-if="collapseState === 'off'"></Icon>
    </div>
    <Menu active-name="statistic" width="auto">
      <div class="layout-logo-left"></div>
      <router-link to="/statitic/book">
      <Menu-item name="1">
        <Icon type="connection-bars"  :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">船只预订排名</span>
      </Menu-item>
      </router-link>
      <router-link to="/statitic/monthrate">
      <Menu-item name="2">
        <Icon type="arrow-graph-up-right"  :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">环比</span>
      </Menu-item>
      </router-link>
      <router-link to="/statitic/volumn">
      <Menu-item name="3">
        <Icon type="social-usd" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">营业额</span>
      </Menu-item>
      </router-link>
      <router-link to="/statitic/other">
      <Menu-item name="4">
        <Icon type="ios-shuffle-strong" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">其他</span>
      </Menu-item>
      </router-link>

    </Menu>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'left-menu',
    props: ['module-name'],
    data: function () {
      return {
        collapseState: 'on'
      }
    },
    computed: {
      iconSize () {
        return this.collapseState === 'on' ? 14 : 24
      }
    },
    methods: {
      toggleMenu () {
        this.$emit('toggleParentSpan')
        this.collapseState === 'on' ? this.collapseState = 'off' : this.collapseState = 'on'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left-menu {
    padding: 0 5px 0;
  }
  .menu-header {
    height:30px;
    width: auto;
    background: #fff;
    text-align: center;
    line-height: 30px;
    color: #7c7c7c;
    font-size: 20px;
    border-right: 1px solid transparent;
    border-color: #d7dde4;
  }
  .ivu-menu-vertical .ivu-menu-item {
    color:rgba(60, 63, 64, 0.9);
    cursor: pointer;
    padding: 14px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    z-index: 1;
  }
</style>
